<template>
	<view>
		<view class="content">
			<ms-tabs :list="tabsList" v-model="active"></ms-tabs>
			<ms-tabs-swiper :current="active" :swiperPages="swiper.swiperPages" @change="change" :swiperHeight="swiper.swiperHeight"></ms-tabs-swiper>
		</view>
	</view>
</template>

<script>
	import msTabs from '@/components/ms-tabs/ms-tabs.vue'
	import msTabsSwiper from '@/components/ms-tabs-swiper/ms-tabs-swiper.vue'
	export default {
		components: {
			msTabs,
			msTabsSwiper
		},
		data() {
			return {
				tabsList: [{
						title: "推荐",
					},{
						title: "热点"
					},{
						title: "社会"
					},{
						title: "娱乐"
					}
				],
				active: 0,
				swiper:{
					swiperHeight:0,
					swiperPages:[{
						id:"1",
						data:{
							id: "1",
							title: "x1",
							url: "../json/list.json"
						}
					},
					{
						id:"2",
						data: {
							id: "2",
							title: "x2",
							url: "../json/list.json"
						}
					},
					{
						id:"3",
						data: {
							id: "3",
							title: "x3",
							url: "../json/list.json"
						}
					},
					{
						id:"4",
						data: {
							id: "4",
							title: "x4",
							url: "../json/list.json"
						}
					}]
				}
				
			}
		},
		watch:{
			active() {
				console.log(this.active)
			}
		},
		onReady(){
			const res = uni.getSystemInfoSync();
			let view=uni.createSelectorQuery().select('.tabBlock');
			view.boundingClientRect(data => {
						  this.swiper.swiperHeight= res.windowHeight - data.height;
						}).exec();
		},
		methods: {
			change(e){
				console.log(e.detail.current)
				this.active = e.detail.current
			}
			
		}
	}
</script>

<style 
	

</style>
